<!-- 个人中心 -->
<template>
	<scroll-view class="person scroll-viewed" :scroll-y="true" @scroll="handleMainScroll">
		<view class="person-head">
			<view class="person-head-top">
				<img src="@/assets/image/icon24.png" alt="" @click="handleProfileEdit">
			</view>
			<!-- 最小化时候不显示 -->
			<view class="person-info">
				<view @click="getUserInfo()" class="avatar-box">
					<!-- <van-image round width="144rpx" height="144rpx" :src="userInfo.Avatar" /> -->
					<HeadImg :headAvatar="userInfo.Avatar" :RealState="userInfo.RealState" />
					<text v-if="userInfo.SHState">审核中</text>
				</view>
				<view class="person-info-box">
					<view class="person-info-box-name">{{ userInfo.ShowName }}</view>
					<text>{{ userInfo.Intro }}</text>
				</view>
			</view>
			<view class="person-info-data">
				<view class="person-info-data-item" @click="checkBeanVermicelli(1)">
					<view class="person-info-data-item-num">{{ userInfo.FollowToCount }}</view>
					<view class="person-info-data-item-name">关注</view>
				</view>
				<view class="person-info-data-item" @click="checkBeanVermicelli(1)">
					<view class="person-info-data-item-num">{{ userInfo.FollowMeCount }}</view>
					<view class="person-info-data-item-name">粉丝</view>
				</view>
				<view class="person-info-data-item">
					<view class="person-info-data-item-num">{{ userInfo.LikeMeCount }}</view>
					<view class="person-info-data-item-name">获赞</view>
				</view>
				<view class="person-info-data-item" @click="checkBeanVermicelli(2)">
					<view class="person-info-data-item-num">{{ userInfo.VisitorCount }}</view>
					<view class="person-info-data-item-name">访客</view>
				</view>
			</view>
		</view>
		<view class="person-main">
			<view class="person-main-member">
				<img src="@/assets/image/icon26.png" alt="">
				<view class="person-main-member-right-box">
					<view class="person-main-member-center">
						<view class="person-main-member-center-name">{{state.userInfo.VipState == 0 ? '开通会员' : '会员中心' }}
						</view>
						<view class="person-main-member-center-tips">
							{{state.userInfo.VipState == 0 ? '尊享10大会员权益' : '到期时间 ' + state.memberEndTimer }}
						</view>
					</view>
					<view class="person-main-member-right" @click="openMemberFn()">
						<text>{{state.userInfo.VipState == 0 ? '立即开通' : '立即续费' }}</text>
						<img src="@/assets/image/icon37.png" alt="">
					</view>
				</view>
			</view>
			<view class="person-main-setting">
				<van-cell>
					<template #title>
						<div class="head">
							<img src="@/assets/image/icon32.png" />
							<span class="custom-title">我的钱包</span>
						</div>
					</template>
					<template #value>
						<div class="head head-right" @click="myWalletFn()">
							<img src="@/assets/image/icon25.png" />
							<span class="custom-title">{{ userInfo.Money }}</span>
							<img class="head-right-right" src="@/assets/image/icon29.png" />
						</div>
					</template>
				</van-cell>
				<van-cell>
					<template #title>
						<div class="head">
							<img src="@/assets/image/icon30.png" />
							<span class="custom-title">认证中心</span>
						</div>
					</template>
					<template #value>
						<div class="head head-right" @click="authentication()">
							<span class="custom-title">{{ authStoreName }}</span>
							<img class="head-right-right" src="@/assets/image/icon29.png" />
						</div>
					</template>
				</van-cell>
				<van-cell style="margin:0">

					<template #title>
						<div class="head" @click="myPhotoFn()">
							<img src="@/assets/image/icon28.png" />
							<span class="custom-title">我的相册</span>
						</div>
					</template>
					<template #value>
						<div class="head head-right head-photo-right">
							<view class="custom-title-photo" @click="uploadImg()">
								<img src="@/assets/image/icon27.png" alt=""><text>上传</text>
							</view>
						</div>
					</template>
				</van-cell>
				<van-cell class="head-content-photo">
					<template #title>
						<div class="head-content">
							<van-grid :border="false" :column-num="3" @click="myPhotoFn()">
								<van-grid-item v-for="(item,index) in userPhotoList" :key="item.ID">
									<!-- <van-image :src="item.FilePath" fit="cover" /> -->
									<PhotoListItem :itemData="item" :isPerson="true" :userAllPhoto="userPhotoList"
										:userPhotoList="userPhotoList.map(o => o.FilePath)" :photoIndex="index" />
									<!-- <AuthRole :dataItem="userInfo" v-if="userInfo.RealState == 1" /> -->
								</van-grid-item>
							</van-grid>
							<Empty v-if="userPhotoList.length == 0"></Empty>
						</div>
					</template>
				</van-cell>
				<van-cell>

					<template #title>
						<div class="head">
							<img src="@/assets/image/icon33.png" />
							<span class="custom-title">我的动态</span>
						</div>
					</template>
					<template #value>
						<div class="head head-right" @click="getDynamic()">
							<img class="head-right-img" :src="userInfo.Avatar" />
							<img class="head-right-right" src="@/assets/image/icon29.png" />
						</div>
					</template>
				</van-cell>
				<van-cell>

					<template #title>
						<div class="head">
							<img src="@/assets/image/icon34.png" />
							<span class="custom-title">联系客服</span>
						</div>
					</template>
					<template #value>
						<div class="head head-right" @click="privateChatFn()">
							<img class="head-right-right" src="@/assets/image/icon29.png" />
						</div>
					</template>
				</van-cell>
				<van-cell>

					<template #title>
						<div class="head">
							<img src="@/assets/image/icon35.png" />
							<span class="custom-title">系统设置</span>
						</div>
					</template>
					<template #value>
						<div class="head head-right" @click="systemSetting()">
							<img class="head-right-right" src="@/assets/image/icon29.png" />
						</div>
					</template>
				</van-cell>
			</view>
		</view>

	</scroll-view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance,
		onMounted,
		toRefs,
		computed
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import PhotoListItem from "@/components/photoListItem/index.vue"

	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"
	import {
		UserInfo,
		OnePhotos, // 获取照片
		uploadAlbum, // 上传到相册
		LookUserExpand, // 查看会员详情
	} from "@/api/person/index.js"
	let {
		proxy
	} = getCurrentInstance()

	const state = reactive({
		scrollTop: 0,
		initScrollTop: 0,
		minimizedHeight: 0,
		minimized: false,
		userInfo: {},
		userPhotoList: [],
		authName: "未认证",
		memberEndTimer: ""
	})

	let {
		userInfo,
		userPhotoList
	} = toRefs(state)

	import {
		AuthStateStore
	} from "@/store/authIndex.js"
	let AuthStore = AuthStateStore()

	let authStoreName = computed(() => {
		let zrAuth = AuthStore.$state.authState.find(o => o.RealType == 0)
		let nsAuth = AuthStore.$state.authState.find(o => o.RealType == 1)
		let {
			RealType,
			RealState
		} = zrAuth
		let str = ""
		let zr = {
			0: '未认证',
			1: '真人认证成功',
			2: '真人认证失败'
		}
		let ns = {
			0: '女神认证中',
			1: '女神认证成功',
			2: '女神认证失败'
		}
		if (RealType == 0) {
			str = zr[zrAuth.RealState]
		}
		if (RealType == 1 && nsAuth.RealState > 0) {
			str = ns[nsAuth.RealState]
		}
		return str
	})

	onLoad((options) => {})

	// 查看会员开通详情
	const LookUserExpandFn = async () => {
		let data = await proxy.$get(LookUserExpand)
		state.memberEndTimer = data.data.find(o => o.ItemName == 'VIP_ETIME').Value
	}

	const UserInfoData = async () => {
		let data = await proxy.$get(UserInfo + getAuthorization('userId'))
		if (data.code == 200) {
			let userInfo = JSON.stringify(data.data)
			state.userInfo = data.data
			if (state.userInfo.VipState) {
				LookUserExpandFn()
			}
			setAuthorization("userInfo", userInfo)
		}
	}

	const OnePhotosFn = async () => {
		let params = {
			PageIndex: 1,
			userID: getAuthorization('userId'),
			PageSize: 6
		}
		let data = await proxy.$get(OnePhotos, params)
		if (data.code == 200) {
			console.log(data)
			state.userPhotoList = data.data.Photos
		}
	}

	const uploadImg = () => {
		let tokenObj = getAuthorization("token") ? JSON.parse(getAuthorization("token")) : ""
		let token = tokenObj.AccessToken
		uni.chooseImage({
			count: 9, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], //从相册选择
			success: function(res) {
				uni.uploadFile({
					url: '/api/app/api/G/user-heibai/v1/Files', //仅为示例，非真实的接口地址
					files: res.tempFiles.map(o => {
						return {
							name: o.name,
							file: o,
							uri: o.path
						}
					}),
					name: 'file',
					header: {
						"Authorization": "Bearer " + token
					},
					formData: {
						'groupCode': '99999999'
					},
					success: async (uploadFileRes) => {
						// uploadAlbum
						let data = JSON.parse(uploadFileRes.data)
						let paramsAlbum = {
							"photos": data.data.map(o => {
								return {
									"fileID": o.ID
								}
							})
						}
						try {
							let resAlbum = await proxy.$post(uploadAlbum(getAuthorization(
								'userId')), paramsAlbum)
							if (data.code == 200) {
								OnePhotosFn()
							}
						} catch (error) {
							uni.showToast({
								icon: "none",
								title: error.message
							})
						}
					}
				})
			}
		});
	}


	onMounted(() => {
		UserInfoData()
		OnePhotosFn() // 获取6张图片
		measureBoxSizing();
	})

	function measureBoxSizing() {
		const query = uni.createSelectorQuery().in(this);
		query.select('.person-main').boundingClientRect(data => {
			//记录下初始的高度，因为在不同尺寸屏幕上，这个值会变动，不能写死
			state.initScrollTop = data.top;
			//界面上测量的滚动阈值为原始高度的39%即可缩小为小尺寸比例
			state.minimizedHeight = Math.ceil(state.initScrollTop * 0.39);
		}).exec();
	}

	const handleMainScroll = (e) => {
		if (e.detail.scrollTop > (state.initScrollTop - state.minimizedHeight)) {
			state.minimized = true;
		} else {
			state.minimized = false;
		}
	}

	// 查看个人资料
	const getUserInfo = () => {
		uni.navigateTo({
			url: '/pages/home/person/dynamic/index?isPerson=true&types=3&tabTypes=2&userId=' +
				getAuthorization("userId")
		})
	}

	function handleProfileEdit() {
		uni.navigateTo({
			url: '/pages/home/person/profile/index'
		})
	}

	const getDynamic = () => {
		uni.navigateTo({
			url: '/pages/home/releaseDynamic/index'
		})
	}

	// 实名认证
	const authentication = () => {
		uni.navigateTo({
			url: "/pages/home/person/authentication/index"
		})
	}

	// 开通会员
	const openMemberFn = () => {
		uni.navigateTo({
			url: "/pages/home/person/openMemberPage/index"
		})
	}

	// 我的钱包
	const myWalletFn = () => {
		uni.navigateTo({
			url: "/pages/home/person/myWallet/index"
		})
	}

	// 我的相册

	const myPhotoFn = () => {
		uni.navigateTo({
			url: "/pages/home/person/myPhoto/index"
		})
	}

	// 系统设置
	const systemSetting = () => {
		uni.navigateTo({
			url: "/pages/home/person/systemSetting/index"
		})
	}

	// 联系客服
	const privateChatFn = () => {
		uni.navigateTo({
			url: '/pages/privateChat/index?userIMId=' + 215
		})
	}

	// 查看关注访客
	const checkBeanVermicelli = (types) => {
		let str = '/pages/home/person/beanVermicelli/index'
		if (types == 2) {
			str = '/pages/home/person/visitor/index'
		}
		uni.navigateTo({
			url: str
		})
	}
</script>

<style lang="scss" scoped>
	.scroll-viewed {
		position: fixed;
		height: calc(100% - 120rpx);
	}

	.person-head-top {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 32rpx;
		color: #AAAAAA;
		font-size: 30rpx;

		img {
			width: 32rpx;
			height: 32rpx;
		}

		.person-head-top-left {
			display: flex;
			align-items: center;

			text {
				display: block;
				height: 32rpx;
				line-height: 36rpx;
				margin-left: 5rpx;
			}

			img {
				width: 32rpx;
			}
		}
	}

	.person-head {
		padding: 20rpx;
		height: 520rpx;
		background: url("../../../assets/image/icon23.png") no-repeat;
		background-size: 100%;

		.person-info {
			margin-top: 24rpx;
			display: flex;
			align-items: center;

			.person-info-box {
				margin-left: 24rpx;

				.person-info-box-name {
					font-size: 40rpx;
					margin-bottom: 20rpx;
					color: #fff;
				}

				text {
					font-size: 26rpx;
					color: #C5C5C5;
				}
			}
		}

	}

	.person-info-data {
		display: flex;
		margin-top: 48rpx;

		.person-info-data-item {
			width: 25%;
			text-align: center;
		}

		.person-info-data-item-num {
			font-size: 40rpx;
			color: #fff;
			font-weight: bold;
		}

		.person-info-data-item-name {
			color: #999999;
			font-size: 24rpx;
		}
	}

	.person-main {
		padding-bottom: 20rpx;
		background: #F7F8F9;
		border-radius: 24rpx 24rpx 0 0;
		padding-top: 20rpx;
		margin-top: -120rpx;

		.person-main-member {
			width: 700rpx;
			height: 140rpx;
			background: url(../../../assets/image/icon36.png) no-repeat;
			background-size: 100%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			img {
				width: 88rpx;
				flex: none;
			}

			.person-main-member-right-box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 30rpx;
				margin-left: 10rpx;
			}

			.person-main-member-center {
				.person-main-member-center-name {
					color: #262626;
					font-size: 36rpx;
				}

				.person-main-member-center-tips {
					color: #B4762D;
					font-size: 24rpx;
				}
			}

			.person-main-member-right {
				width: 144rpx;
				height: 52rpx;
				background: url(../../../assets/image/icon38.png) no-repeat;
				background-size: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 24rpx;
					color: #FFFFFF;
				}

				img {
					width: 6rpx;
					margin-left: 5rpx;
				}
			}
		}
	}

	.person-main-setting {
		margin: 30rpx 30rpx 0 30rpx;

		.head {
			display: flex;
			align-items: center;
			font-size: 30rpx;

			img {
				width: 40rpx;
				margin-right: 10rpx;
			}
		}

		.head-right {
			justify-content: flex-end;

			img {
				margin: 0;
			}

			span {
				margin: 0 5rpx;
			}

			.head-right-right {
				width: 20rpx;
			}

			.custom-title-photo {
				width: 144rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F7F8F9;
				color: #262626;
				border-radius: 48rpx;

				img {
					width: 28rpx;
					margin-right: 8rpx;
				}
			}

			.head-right-img {
				width: 48rpx;
				height: 48rpx;
				border-radius: 8rpx;
				margin-right: 8rpx;
			}
		}

	}

	.van-cell {
		margin-bottom: 20rpx;
		height: 108rpx;
		// justify-content: space-between;
		align-items: center;
	}

	.head-content-photo {
		height: auto;
		padding: 0 10rpx;

		.van-image {
			min-height: 100rpx;
		}
	}

	.van-grid-item {
		height: 280rpx;

		.van-image {
			width: 100%;
			height: 280rpx;
		}

		:deep(.view-item-auth) {
			top: 30rpx;
			left: 20rpx;
		}
	}

	.avatar-box {
		position: relative;
		width: 144rpx;
		height: 144rpx;
		// border-radius: 50%;
		// overflow: hidden;

		text {
			display: block;
			position: absolute;
			background: rgba(0, 0, 0, .5);
			bottom: 0;
			width: 100%;
			text-align: center;
			line-height: 1.6;
			color: #fff;
			font-size: 24rpx;
		}
	}
</style>
